<template>
  <div class="searchTwo">
    <div class="searchtop">
      <form action="/" class="adds">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </div>
    <div class="grid"></div>
    <!-- 热门内容 -->
    <div class="hotcontent">
      <p>热门内容</p>
      <ul>
        <li>1 丁雨晨新作:vivo一阵风</li>
        <li>2 台湾话题暴恐《咒》解读</li>
        <li>3 华盛辉和你说说心里话</li>
        <li>4 必看科普《霍乱的故事》</li>
        <li>5 带感! 阿里最新校招片</li>
        <li>6 养眼! 百事可乐《新女团》</li>
        <li>7 日本少女广告好细腻</li>
        <li>8 2022艾美奖提名名单</li>
        <li>9 怒豆渣: 新电影自习室</li>
      </ul>
    </div>
    <!-- 热门搜索 -->
    <div class="hotsearch">
      <p>热门搜索</p>
      <div class="spinner" v-if="!list">
        <van-loading type="spinner" size="24px" />
      </div>
      <ul>
        <li v-for="item in list" :key="item.id">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { gethotsearch } from "../api/home";
export default {
  data() {
    return {
      value: "",
      list: "",
    };
  },
  methods: {
    onSearch() {
      console.log("输入值");
      // let value = this;
      // this.$emit("add", { value });

      this.$router.push("/SearchThree?kw=" + this.value);
    },
    onCancel() {
      //   Toast("取消");
      this.$router.go(-1);
    },
    gethotsearchFun() {
      gethotsearch().then((data) => {
        // console.log("热门搜索关键词", data);
        this.list = data.data.list;
      });
    },
  },
  mounted() {
    this.gethotsearchFun();
  },
};
</script>

<style lang="less" >
.searchTwo {
  width: 100%;
  height: 100%;
  z-index: 100;
  position: relative;
  background-color: #fff;
  .searchtop {
    width: 100%;
    height: 54px;
    display: flex;
    .adds {
      width: 100%;
    }
  }
  .grid {
    width: 100%;
    height: 2px;
    background-color: #e4e4e4;
  }
  .hotcontent {
    width: 100%;
    margin-top: 10px;
    p {
      padding-left: 12px;
      height: 32px;
      line-height: 32px;
      color: #a2a2a2;
      font-size: 14px;
    }
    ul {
      padding: 0px 12px 0px 12px;
      li {
        color: #2e2e2e;
        font-size: 14px;
        height: 31px;
        line-height: 31px;
        // font-weight: 600;
      }
    }
  }
  .hotsearch {
    width: 100%;
    margin-top: 10px;
    p {
      padding-left: 12px;
      height: 32px;
      line-height: 32px;
      color: #a2a2a2;
      font-size: 14px;
    }
    .spinner {
      position: fixed;
      top: 54%;
      left: 20%;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
      padding: 0px 12px 0px 12px;
      li {
        background-color: #f7f7f7;
        padding: 5px 10px 5px 10px;
        color: #303030;
        margin-right: 10px;
        margin-top: 10px;
        font-size: 14px;
        border-radius: 4px;
      }
    }
  }
}
</style>